require(
    [
        '../../js/lib/gojs/go-debug'
    ],
    function (go) {

        var $$ = go.GraphObject.make;

        var diagram =
            $$(go.Diagram, "main",
                { initialContentAlignment: go.Spot.Center });


        // the "simple" template just shows the key string and the color in the background,
        // but it also includes a tooltip that shows the description
        var simpletemplate =
            $$(go.Node, "Auto",
                $$(go.Shape, "Ellipse",
                    new go.Binding("fill", "color")),
                $$(go.TextBlock,
                    new go.Binding("text", "key")),
                {
                    toolTip:
                        $$(go.Adornment, "Auto",
                            $$(go.Shape, { fill: "#FFFFCC" }),
                            $$(go.TextBlock, { margin: 4 },
                                new go.Binding("text", "desc"))
                        )
                }
            );

        // the "detailed" template shows all of the information in a Table Panel
        var detailtemplate =
            $$(go.Node, "Auto",
                $$(go.Shape, "RoundedRectangle",
                    new go.Binding("fill", "color")),
                $$(go.Panel, "Table",
                    { defaultAlignment: go.Spot.Left },
                    $$(go.TextBlock, { row: 0, column: 0, columnSpan: 2, font: "bold 12pt sans-serif" },
                        new go.Binding("text", "key")),
                    $$(go.TextBlock, { row: 1, column: 0 }, "Description:"),
                    $$(go.TextBlock, { row: 1, column: 1 }, new go.Binding("text", "desc")),
                    $$(go.TextBlock, { row: 2, column: 0 }, "Color:"),
                    $$(go.TextBlock, { row: 2, column: 1 }, new go.Binding("text", "color"))
                )
            );

        // create the nodeTemplateMap, holding three node templates:
        var templmap = new go.Map("string", go.Node);
        // for each of the node categories, specify which template to use
        templmap.add("simple", simpletemplate);
        templmap.add("detailed", detailtemplate);
        // for the default category, "", use the same template that Diagrams use by default;
        // this just shows the key value as a simple TextBlock
        templmap.add("", diagram.nodeTemplate);

        diagram.nodeTemplateMap = templmap;

        diagram.model.nodeDataArray = [
            { key: "Alpha", desc: "first letter", color: "green" },  // uses default category: ""
            { key: "Beta", desc: "second letter", color: "lightblue", category: "simple" },
            { key: "Gamma", desc: "third letter", color: "pink", category: "detailed" },
            { key: "Delta", desc: "fourth letter", color: "cyan", category: "detailed" }
        ];
    }
)